import Add from "../componets/fac/add.js";
import Delete from "../componets/fac/delete.js";
import Edit from "../componets/fac/edit.js";
import Search from "../componets/fac/search.js";

let { $, layer, table } = layui;
export default class Fac {
    constructor() {
        this.render();
        this.handle();
    }
    render() {
        let template = `
            <html lang="en">
                <head>
                </head>
                <body>
                    <form class="layui-form" action="">
                        <table class="layui-table" id="facTable" lay-filter="facTable"></table>
                    </form>
                    <script type="text/html" id="tools">
                        <div class="layui-input-inline">
                            <button type="button" lay-event="add" class="layui-btn">
                                <i class="layui-icon layui-icon-addition"></i>
                            </button>
                        </div>
                        <div class="layui-input-inline type">
                            <select name="type" lay-verify="required" id="searchType">
                                <option value="films">电影</option>
                                <option value="cinemas">影院</opiton>
                            </select>
                        </div>
                        <div class="layui-input-inline value">
                            <input type="text" name="value" required lay-verify="required" placeholder="请输入内容" autocomplete="off"
                            class="layui-input searchInput">
                        </div>
                        <div class="layui-input-inline">
                            <button type="button" lay-event="search" lay-filter="search" class="layui-btn"><i class="layui-icon layui-icon-search"></i></button>
                        </div>
                    </script>
                    <script type="text/html" id="barDemo">
                        <button type="button" class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
                        <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" layui-btn-xs" lay-event="del">删除</button>
                    </script>
                    <script type="text/html" id="addFacTemplate"></script>
                    <script type="text/html" id="editFacTemplate"></script>
                </body>
            </html>
        `;
        $('#content').html(template);
    }
    handle() {
        let tableIns = table.render({
            elem: '#facTable',
            url: '/fac',
            method: 'get',
            toolbar: '#tools',
            page: true,
            parseData(res) {
                return {
                    "code": 0,
                    "count": res.data.total,
                    "data": res.data.rows
                }
            },
            cols: [[
                {
                    field: 'films', title: '电影名',
                    templet: function (d) {
                        // console.log(d);
                        return d.films ? d.films.name : "";
                    }
                },
                {
                    field: 'cinemas', title: '影院',
                    templet(d) {
                        return d.cinemas ? d.cinemas.name : "";
                    }
                },
                {
                    field: 'schedule', title: '场次',
                    width: 400,
                    templet(d) {
                        let str = '';
                        for (let i = 0; i < d.schedule.length; i++) {
                            str += `<a href="javascript:;" >${d.schedule[i].date}</a>` + ' ';
                        }
                        return d.schedule ? str : "";
                    }
                },
                {
                    field: 'edit', title: '编辑', width: 150, toolbar: '#barDemo', align: "center"
                }
            ]],
            request: {
                pageName: 'current',
                limitName: 'pageSize'
            },
            limit: 10,
            limits: [10, 20, 30, 40, 50],
        })
        table.on('toolbar(facTable)', function (obj) {
            switch (obj.event) {
                case 'add':
                    new Add(tableIns);
                    break;
                case 'search':
                    new Search(tableIns);
                    break;
            }
        })
        table.on('tool(facTable)', function (obj) {
            switch (obj.event) {
                case 'edit':
                    new Edit(tableIns, obj);
                    break;
                case 'del':
                    new Delete(tableIns, obj);
                    break;
            }
        })
    }
}